<!-- 饼图 -->
<template>
    <div class="wrap" ref="pieRef"></div>
</template>

<script lang='ts' setup>
import { computed, markRaw, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import {
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { handleResize } from '@/utils/other';

echarts.use([
    ToolboxComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout,
    TitleComponent
]);

interface PieData {
    value: number
    name: string
}

interface PieProps {
    legendPosition?: 'top' | 'bottom' | 'left' | 'right'
    name: string,
    type: "A" | "B" | "C" | "D"
    data: PieData[]
}


const props = withDefaults(defineProps<PieProps>(), {
    legendPosition: 'bottom',
    type: "A"
})

const legend = computed(() => {
    let p: {
        top?: string
        left?: string
        right?: string
        type?: string
        orient?: string
        data?: any[]
    } = {}

    if (props.legendPosition === "top") {
        p = { top: "top" }
    }
    if (props.legendPosition === "bottom") {
        p = { top: "bottom" }
    }
    if (props.legendPosition === "left") {
        p = { top: 'center', left: 'left' }
        p.orient = "vertical"
        p.data = props.data.map(item => item.name)

    }
    if (props.legendPosition === "right") {
        p = { top: "center", right: "right" }
        p.orient = "vertical"
        p.data = props.data

    }
    p.type = "scroll"
    return p
})
const emphasis = {
    label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold'
    }
}
const itemStyle = {
    borderRadius: 8
}
const label = {
    show: false,
    position: 'center'
}


let pieRef = ref() // DOM实例
let chart = ref() // echarts实例
let flag = ref<boolean>(true)
onMounted(() => {
    chart.value = markRaw(echarts.init(pieRef.value))
    let options: any = {}
    if (props.type === "A") {
        options = {
            title:{
                text:"防御",
                right:"5%"
            },
            tooltip: {
                trigger: 'item'
            },
            legend: legend.value,
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    avoidLabelOverlap: false,
                    radius: ["40%", "75%"],
                    center: ['50%', '50%'],
                    itemStyle,
                    label,
                    emphasis,
                    data: props.data
                },
            ]
        }
    }
    if (props.type === "B") {
        options = {
            title:{
                text:"攻击",
                left:"5%"
            },
            tooltip: {
                trigger: 'item'
            },
            legend: legend.value,
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    avoidLabelOverlap: false,
                    radius: "70%",
                    center: ['50%', '50%'],
                    emphasis,
                    data: props.data
                },
            ]
        }
    }
    if (props.type === "C") {
        options = {
            title:{
                text:"敏捷",
                right:"5%"
            },
            tooltip: {
                trigger: 'item'
            },
            legend: legend.value,
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    avoidLabelOverlap: false,
                    radius: "70%",
                    center: ['50%', '50%'],
                    label: {
                        show: false,
                    },
                    emphasis,
                    labelLine: {
                        show: false
                    },
                    data: props.data
                },
            ]
        }
    }
    if (props.type === "D") {
        options = {
            tooltip: {
                trigger: 'item'
            },
            title:{
                text:"血量",
                left:"5%"
            },
            legend: legend.value,
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    avoidLabelOverlap: false,
                    radius: [30, "90%"],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 4
                    },
                    label,
                    emphasis,
                    data: props.data
                },
            ]
        }
    }
    chart.value.setOption(options)
    window.addEventListener('resize', handle)

    chart.value.on('rendered',()=>{
        
        if (!flag.value) return
        flag.value = false
        setTimeout(() => {
            chart.value.resize()
            handleResize()
        }, 1000)
    })
})
const handle = () => {
    chart.value.resize()    
}
onUnmounted(() => {
    window.removeEventListener('resize', handle)
})


</script>

<style lang="less" scoped>
.wrap {
   overflow: hidden;
}
</style>